<template>
	<!-- 我的-康复顾问-康复课程管理 -->
	<view class="content">
		<view class="bg"></view>
		<view class="search">
			<view style="width: 100%;">
				<uni-search-bar placeholder="搜索康复师" bgColor="#FFFFFF" :radius="100" @confirm="search" v-model="searchValue" />
			</view>
		</view>
		<!-- todo 上方状态选择栏 -->
		<view class="tab">
			<view class="tab-item" v-for="(item,index) in list" :class="{active:activeTab==item.title}" @click="change(item)">
				<view class="title">{{item.title}}</view>
				<view class="line"></view>
			</view>
		</view>
		<!-- 会员列表 -->
		<view style="z-index: 100;">
			<view v-for="(item,index) in data" class="item" style="justify-content: space-between;">
				<view class="content-top"><!-- @click="goDetail(item)"> -->
					<view class="name">{{item.memberName}}</view>
					<!-- <view class="status">{{status[checkStatus]}}</view> -->
					<view class="status">{{ getStatusName(item) }}</view>
				</view>
				<view style="margin-top: 30rpx; display: flex;justify-content: space-between;">
					<view class="type">康复师</view>
					<view class="value">{{item.recureTeacherName}}</view>
				</view>
				<view style="margin-top: 18rpx; display: flex;justify-content: space-between;">
					<view class="type">课程日期</view>
					<view class="value">{{ formattedDate(item.lessonDate) }} {{ getDatas(item.lessonDate) }}</view>
				</view>
				<view style="margin-top: 18rpx; display: flex;justify-content: space-between;">
					<view class="type">课程时间</view>
					<view class="value">{{item.lessonHourTime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				searchValue: '',
				status: {
					0: "未开始",
					1: "进行中",
					2: "已完成"
				},
				list: [{
					title: "全部",
					status: -1,
				}, {
					title: "未开始",
					status: 0,
				}, {
					title: "进行中",
					status: 1,
				}, {
					title: "已完成",
					status: 2,
				}],
				activeTab: "全部",
				checkStatus: -1,
				data: [],
				pageno: 1,
				pagesize: 10,
				pageCount: 0,
			}
		},
		onLoad(option) {
			this.memberId = option.id;
		},
		mounted() {
			this.classPage();
		},
		methods: {
			classPage() {
				let that = this;
				let dataSend = {
					"page": {
						"pageno": that.pageno,
						"pagesize": that.pagesize
					},
					"conditions":[{
						"name":"memberId",
						"operate":"eq",
						"value":that.memberId,
					}],
					"cascades": [{
						"column": "member",
					}],
				};
				let nowTime = that.getNowTime();
				if (that.checkStatus == 0) {
					dataSend.conditions.push({
						"name":"lessonStartTime",
						"operate":"gt",
						"value":nowTime,
					});
				} else if (that.checkStatus == 1)  {
					dataSend.conditions.push({
						"name":"lessonStartTime",
						"operate":"le",
						"value":nowTime,
					});
					dataSend.conditions.push({
						"name":"lessonEndTime",
						"operate":"ge",
						"value":nowTime,
					});
				} else if (that.checkStatus == 2)  {
					dataSend.conditions.push({
						"name":"lessonEndTime",
						"operate":"lt",
						"value":nowTime,
					});
				}
				if (that.searchValue != null && that.searchValue != "") {
					dataSend.conditions.push({
						"name":"recureTeacherName",
						"operate":"like",
						"value":that.searchValue,
					})
				};
				uni.request({
					url: "https://guokang365.mordo-care.com/api/recureLesson/searchPage",
					method: 'POST',
					//仅为示例，并非真实接口地址。
					header: {
						'Cookie': "JSESSIONID=" + getApp().globalData.serverSession
					},
					data: dataSend,
					success: (res) => {
						// todo 入参是or
						if (res.data.result != '100') {
							// 获取会员统计数据失败，不确定是否要弹窗
						} else if (res.data.list != null && res.data.list.length > 0) {
							that.data = that.data.concat(res.data.list);
							that.pageCount = res.data.list.length;
						}
					},
				});
			},
			search(res) {
				this.data = [];
				this.pageno = 1;
				this.pagesize = 10;
				this.pageCount = 0;
				this.classPage();
			},
			// search(res) {
			// 	uni.showToast({
			// 		title: '搜索：' + res.value,
			// 		icon: 'none'
			// 	})
			// },
			change(item) {
				this.data = [];
				this.activeTab = item.title;
				this.checkStatus = item.status;
				this.classPage();
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/my/rehabilitation-class-detail?id=" + id
				});
			},
			formattedDate(dateString) {
				const year = dateString.substr(0, 4);
				const month = dateString.substr(4, 2);
				const day = dateString.substr(6, 2);
				const date = new Date(year, month - 1, day); // 注意月份要减一
				const formattedDate = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`; // 格式化日期字符串
				return formattedDate;
			},
			getDatas(dateString) {
				const year = dateString.substr(0, 4);
				const month = dateString.substr(4, 2);
				const day = dateString.substr(6, 2);
				const date = new Date(year, month - 1, day); // 注意月份要减一
				const weekDays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
				const weekday = weekDays[date.getDay()];
				return weekday;
			},
			getNowTime() {
				let date = new Date();
				let dateString = date.getFullYear().toString() +
				    (date.getMonth() + 1).toString().padStart(2, '0') +
				    date.getDate().toString().padStart(2, '0') +
				    date.getHours().toString().padStart(2, '0') +
				    date.getMinutes().toString().padStart(2, '0') +
				    date.getSeconds().toString().padStart(2, '0');
					
				return dateString;
			},
			getStatusName(item) {
				let nowTime = this.getNowTime();
				let status = "";
				if (item.lessonStartTime > nowTime) {
					status = "未开始";
				} else if (item.lessonStartTime <= nowTime && item.lessonEndTime >= nowTime)  {
					status = "进行中";
				} else if (item.lessonEndTime < nowTime)  {
					status = "已完成";
				}
					
				return status;
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.data = [];
				this.pageno = 1;
				this.pagesize = 10;
				this.pageCount = 0;
				this.classPage();
				uni.stopPullDownRefresh()
			}, 500);
		},
		onReachBottom() {
			if (this.pageCount == this.pagesize) {
				this.pageno += 1;
				uni.showLoading({});
				setTimeout(() => {
					this.classPage();
					uni.hideLoading()
				},500);
			}
		},
	}
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.search {
		width: 750rpx;
		height: 128rpx;
		z-index: 1000;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0 22rpx 0 10rpx;
		box-sizing: border-box;

	}

	.bg {
		width: 750rpx;
		height: 128rpx;
		background: #CBFFDB;
		filter: blur(25px);
		position: absolute;
		z-index: 1;
		top: 0px;
	}

	.add-btn {
		width: 100rpx;
		height: 66rpx;

	}

	.item {
		background: #FFFFFF;
		border-radius: 22rpx;
		box-shadow: 0rpx 11rpx 14rpx 0rpx #E9F7ED;
		display: flex;
		width: 707rpx;
		box-sizing: border-box;
		padding: 32rpx;
		flex-direction: column;
		z-index: 1000;
		margin-bottom: 30rpx;

		.content-top {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #e5e5e5;
			padding-bottom: 30rpx;

			.name {
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #48AF4E;
				line-height: 51rpx;
				text-align: left;
				// float: left;
			}

			.status {
				height: 36rpx;
				font-size: 25rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 500;
				color: #FF6666;
				line-height: 50rpx;
				// float: right;
				text-align: right;
				// margin-right: 10rpx;
			}
		}

		.type {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #464646;
			text-align: center;
			margin-top: 6rpx;
		}

		.value {
			font-size: 29rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #c6c6c6;
			text-align: center;
			margin-top: 6rpx;
		}

		.go-icon {
			width: 17rpx;
			height: 25rpx;
			margin-top: 10rpx;
		}

		.hysz-icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;

		}

		.btn {
			width: 200rpx;
			height: 60rpx;
			margin-top: 35rpx;
			margin-left: 450rpx;
			background: #FFFFFF;
			border-radius: 76px;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 700;
			color: #4CB753;
			line-height: 58rpx;
			text-align: center;
			// float: right;
			border: 1px solid #4CB753;
		}
	}

	.tab {
		display: flex;
		justify-content: space-between;
		width: 600rpx;
		margin: 10rpx 0;

		.tab-item {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.title {
			height: 44rpx;
			font-size: 31rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #585858;
			line-height: 44rpx;
		}

		.line {
			width: 37rpx;
			height: 6rpx;
			background: transparent;
			border-radius: 3rpx;
			margin-top: 10rpx;
		}

		.active {
			.line {
				background: #42AE49;
			}

			.title {
				color: #42AE49;
			}
		}
	}
</style>